<!-- 部门配置 -->
<template>
  <div>
    <el-row style="background: #fff;">
      <div class="top">
        <el-button class="btn" type="primary" @click="addDepartment()">添加角色</el-button>
      </div>
      <div>
        <el-table border :data="tableData" style="width: 100%; margin: 15px 0"  height="680">
          <el-table-column prop="date" type="index" label="序号" width="80" ></el-table-column>
          <el-table-column prop="Role" label="角色名称" width="250" show-overflow-tooltip></el-table-column>
          <el-table-column prop="IsManager" label="负责人" width="250" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ (row.IsManager === 0 || !row.IsManager) ? '否' : '是' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button> -->
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column></el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape=false :title="Action === 1 ? '添加角色' : '修改角色'"
      :visible.sync="dialogVisible" v-el-drag-dialog width="600px">
      <el-form label-width="140px" :model="departForm" :rules="rules" ref="departForm">
        <el-form-item label='角色名称：' prop="Role">
          <el-input v-model.trim="departForm.Role" :disabled="Action === 2 ? true : false" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label='是否为负责人：' prop="Role">
          <el-radio v-model="departForm.IsManager" :label="0">否</el-radio>
          <el-radio v-model="departForm.IsManager" :label="1">是</el-radio>
        </el-form-item>
        
      </el-form>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  data() {
    return {
      dialogVisible: false,
      Action: 1,
      departForm: {},
      roleList: [],
      tableData: [],
      rules: {
        Role: [
          { required: true, message: '角色名称不能为空' }
        ]
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetParamDictRole')
      this.tableData = res.Data
    },
    addDepartment() {
      this.Action = 1
      this.departForm = {IsManager: 0}
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.departForm.clearValidate();
      })
    },
    handleEdit(item) {
      this.Action = 2
      this.departForm = { ...item }
      this.dialogVisible = true
    },
    async submit() {
      this.$refs.departForm.validate(async (valid) => {
        if (valid) {
          if (this.tableData.findIndex(item => item.Role == this.departForm.Role) !== -1) {
            this.$message.error('该角色已经存在')
            return false
          }
          const data = {
            Data: {
              Action: this.Action,
              Detail: { ...this.departForm }
            }
          }
          const res = await connrequest('EditParamDictRole', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.dialogVisible = false
            this.getData()
          }
        } else {
          return false;
        }
      });
    },
    async handleDelete(row) {
      const data = {
        Paging:{
          QueryPageNo: 1,
          QueryPageLength: 100000
        }
      }
      const res = await connrequest('GetDevice', data)
      let isUseRole = res.Data.some(item => item.Role === row.Role)
      if(isUseRole){
        this.$message.info('该角色当前正被部分资产使用，为确保系统正常运行，暂无法删除。')
        return false
      }
      this.$confirm('删除角色前请先检查该角色是否存在改角色的资产和基于该角色配置策略规则。否则可能导致系统异常，请谨慎操作。确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            Action: 3,
            Detail: { ...row }
          }
        }
        const res = await connrequest('EditParamDictRole', data)
        if (res.Status.StatusCode === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>